<template>
	<view class="sureorders">
		<view class="sureorders-top">
			<image class="sureorders-topphoto" src="../../static/定位.png" mode=""></image>
			<view class="sureorders-toptext">
				<text class="sureorders-toptext1">{{ nickName }}</text>
				<text class="sureorders-toptext2">江苏省南京市玄武区中国南京软件谷XX路18号XX云楼N13食堂B1楼小厨娘</text>
			</view>
		</view>
		<view class="sureorders-middle">
			<!-- 展示商品名称 -->
			<view class="sureorders-middleall">
				<text class="middle-product-name">{{ product.name }}</text>
				<!-- 展示商品描述 -->
				<text class="middle-product-description">{{ product.description }}</text>
				<!-- 展示商品价格 -->
				<text class="middle-product-price">￥{{ product.price }}</text>
			</view>
			<!-- 展示商品图片 -->
			<image :src="product.url" class="middle-product-image" mode="aspectFit"></image>
			<view class="sureorders-middletext1">
				<text>配送</text>
				<text>标准配送</text>
			</view>
			<view class="sureorders-middletext2">
				<text>发票</text>
				<text>普通发票</text>
			</view>
		</view>
		<view class="sureorders-bottom">
			<text class="sureorders-bottomprice">￥{{ product.price }}</text>
			<button class="submit-order-btn" @click="submitOrder">去支付</button>
		</view>
		<view class="price-bottom">
			<view class="price-row">
				<text class="first-left">商品金额</text>
				<text class="price-first">￥{{ product.price }}</text>
			</view>
			<view class="price-row">
				<text class="next-left">运费</text>
				<text class="price-next">￥0.00</text>
			</view>
			<view class="price-row">
				<text class="result-left">实付款</text>
				<text class="price-result">￥{{ product.price }}</text>
			</view>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			product: {},
			nickName: '', // 用于存储用户的昵称
		};
	},

	mounted() {
		this.loadNickName();
	},

	onShow() {
		// 假设商品数据已经存储在本地存储中，这里从本地存储中获取
		const product = uni.getStorageSync('product');
		if (product) {
			this.product = product;
			console.log("Received product data:", product);
		} else {
			console.log("No product data received");
		}
	},

	onHide() {
		// 当用户退出页面时打印false
		console.log(false);
	},

	methods: {
		loadNickName() {
			// 获取本地存储中的用户昵称
			const nickName = wx.getStorageSync('nickName'); // 使用 'nickName' 作为键来读取
			if (nickName) {
				this.nickName = nickName; // 将读取到的昵称赋值给 nickName 变量
			}
		},

		submitOrder() {
			uni.showModal({
				title: '支付确认',
				content: '您确认要支付吗？',
				success: (res) => {
					if (res.confirm) {
						console.log('支付成功');
						// 更新本地存储的product数据为true
						this.product.isPaid = true;
						uni.setStorageSync('product', this.product);
						// 跳转到allorders页面，并传递支付成功的状态
						uni.redirectTo({
							url: '/pages/allorders/allorders?isPaid=true'
						});
					} else if (res.cancel) {
						console.log('支付取消');
						// 更新本地存储的product数据为false
						this.product.isPaid = false;
						uni.setStorageSync('product', this.product);
						// 跳转到allorders页面，并传递支付取消的状态
						uni.redirectTo({
							url: '/pages/allorders/allorders?isPaid=false'
						});
					}
				}
			});
		}
	}
};
</script>



<style>
.sureorders {
	display: flex;
	flex-direction: column;
	position: relative;
	background-color: #f2f4f5;
	min-height: 100vh;
}

.sureorders-top {
	position: relative;
	border-radius: 30rpx;
	background-color: white;
	height: 140rpx;
	margin: 0 15rpx 0 15rpx;
	margin-top: 30rpx;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.sureorders-topphoto {
	position: absolute;
	width: 40rpx;
	height: 40rpx;
	top: 35%;
	left: 20rpx;
}

.sureorders-toptext {
	position: absolute;
	display: flex;
	flex-direction: column;
	top: 20rpx;
}

.sureorders-toptext1 {
	padding-left: 80rpx;
	font-size: 32rpx;
	/* Increased from 30rpx */
}

.sureorders-toptext2 {
	padding-left: 80rpx;
	font-size: 22rpx;
	/* Increased from 20rpx */
}

.sureorders-middle {
	position: relative;
	border-radius: 30rpx;
	background-color: white;
	height: 450rpx;
	margin: 0 15rpx 0 15rpx;
	margin-top: 30rpx;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
}

.sureorders-middletext1,
.sureorders-middletext2 {
	display: flex;
	justify-content: space-between;
	font-size: 22rpx;
	/* Increased from 20rpx */
	padding: 10rpx 0;
	width: 100%;
	position: absolute;
}

.sureorders-middletext1 {
	top: 300rpx;
}

.sureorders-middletext2 {
	top: 350rpx;
}

.sureorders-middletext1::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 1rpx;
	background-color: #999;
}

.sureorders-middleall {
	display: flex;
	flex-direction: column;
	padding-left: 240rpx;
}

.middle-product-name {
	position: absolute;
	font-size: 32rpx;
	/* Increased from 30rpx */
	font-weight: bold;
	color: #333;
	top: 10rpx;
}

.middle-product-description {
	position: absolute;
	font-size: 22rpx;
	/* Increased from 20rpx */
	color: #666;
	top: 100rpx;
}

.middle-product-price {
	position: absolute;
	font-size: 32rpx;
	/* Increased from 30rpx */
	color: #e64340;
	top: 160rpx;
}

.middle-product-number {
	position: absolute;
	font-size: 27rpx;
	/* Increased from 25rpx */
	color: #666;
	top: 165rpx;
	right: 20rpx;
}

.middle-product-image {
	position: absolute;
	width: 100%;
	border-radius: 10rpx;
	width: 200rpx;
	height: 200rpx;
	top: 1rpx;
	left: 1rpx;
}

.sureorders-bottom {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: #f2f4f5;
	height: 130rpx;
	border-top: 1rpx solid grey;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.15);
	padding: 0 20rpx;
}

.sureorders-bottomprice {
	color: red;
	font-size: 52rpx;
	/* Increased from 50rpx */
}

.submit-order-btn {
	background-color: #e64340;
	color: white;
	font-size: 38rpx;
	/* Increased from 36rpx */
	height: 70rpx;
	line-height: 70rpx;
	text-align: center;
	border-radius: 35rpx;
	padding: 0 40rpx;
	box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.15);
	left: 150rpx;
}

.price-bottom {
	position: relative;
	bottom: 130rpx;
	left: 0;
	right: 0;
	padding: 20rpx;
	background-color: #fff;
	font-size: 30rpx;
	/* Increased from 28rpx */
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	border-top: 1rpx solid #eee;
	box-shadow: 0 -2rpx 8rpx rgba(0, 0, 0, 0.1);
	border-radius: 30rpx;
	margin-top: 150rpx;
	margin-left: 15rpx;
	/* 添加左边距 */
	margin-right: 15rpx;
	/* 添加右边距 */
}

.price-bottom .price-row {
	display: flex;
	justify-content: space-between;
	width: 100%;
}

.price-bottom text {
	color: #333;
	display: block;
}

.price-bottom .first-left,
.price-bottom .next-left,
.price-bottom .result-left {
	text-align: left;
}

.price-bottom .price-first,
.price-bottom .price-next,
.price-bottom .price-result {
	text-align: right;
}

.price-bottom .price-first {
	color: #e64340;
	font-size: 32rpx;
	/* Increased from 28rpx */
}

.price-bottom .price-next {
	color: #666;
	font-size: 30rpx;
	/* Increased from 28rpx */
}

.price-bottom .price-result {
	color: #e64340;
	font-size: 34rpx;
	/* Increased from 28rpx */
	font-weight: bold;
}
</style>